﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>
    <link href="/static/CommentPost/Styles/Comments.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <script type="text/javascript" src="/static/CommentPost/Scripts/jquery-1.4.1.min.js"></script>
 <%--   <script language="javascript" type="text/javascript">

        var userName = 'Tester';
        var startID = 20;
        $(function () {

            //Initialize the comment list when page is loading.
            initialCommentList();

            //bind click event to post button
            $('#postBtn').bind('click', function () {
                var _comment = $('#commentInput').val();
                if (_comment.length > 0) {

                    var newCommentBlock = buildSingleComment(startID, userName, _comment, '1 min ago', '');

                    $('.Comment-Container').hide().prepend(newCommentBlock).fadeIn();
                    $('#commentInput').val('');
                    startID += 1;
                    bindClick2Buttons();
                } else {
                    alert("The input comments should not be blank.");
                }
            });

            // bind click event to the buttons in the comment block.
            bindClick2Buttons();

        });

        function initialCommentList() {
            var commentList = [{ id: 1, user: "Patrick", comments: "This is a comments from Patrick.", postTime: "1 min ago", reply2: 'Deli' },
                            { id: 2, user: "Bob", comments: "This is a comments from Bob.", postTime: "1 hour ago", reply2: '' },
                            { id: 3, user: "Cat", comments: "This is a comments from Cat.", postTime: "1 day ago", reply2: 'Robert' },
                            { id: 4, user: "Kurt", comments: "This is a comments from Kurt.", postTime: "4 days ago", reply2: '' },
                            { id: 5, user: "Robert", comments: "This is a comments from Robert.", postTime: "1 month ago", reply2: ''}];

            var commentBuild = '';
            for (var i = 0; i < commentList.length; i++) {
                commentBuild += buildSingleComment(commentList[i].id, commentList[i].user, commentList[i].comments, commentList[i].postTime, commentList[i].reply2);
            }

            //fill the parent div automatically
            commentBuild += '<div style="clear:both"></div>';
            $('#commentContainer').html(commentBuild);
        }

        function buildSingleComment(id, user, comments, postTime, reply2) {
            var newCommentBlock = '<div class="Comment" id = "' + id + '">';
            newCommentBlock += ' <div class="Comment-img-container">';
            /*newCommentBlock += ' <img alt="#" src="images/default-avatar.png" class="Comment-img" />';*/
            newCommentBlock += '</div>';
            newCommentBlock += '<div class="Comment-Content-Container">';
            newCommentBlock += '<div class="Comment-User-Containner">';
            newCommentBlock += '<ul>';
            newCommentBlock += '<li><h3>' + user + '</h3></li>';
            if (reply2 != null && reply2.length > 0) {
                newCommentBlock += '<li>&nbsp; replied to &nbsp;</li>';
                newCommentBlock += '<li><h3>' + reply2 + '</h3></li>';
            }
            newCommentBlock += '</ul>';
            newCommentBlock += '</div>';
            newCommentBlock += '<div class="Comment-Content">' + comments + '</div>';
            newCommentBlock += '</div>';
            newCommentBlock += '<div class="Comment-Delete-btn">X</div>';
            newCommentBlock += '<div class="Comment-Post-time">' + postTime + '</div>';
          /*  newCommentBlock += '<div class="Comment-Reply-btn">Reply</div>';*/
            newCommentBlock += '</div>';

            return newCommentBlock;
        }

        function bindClick2Buttons() {
            $('.Comment-Delete-btn').bind('click', function () {

                if (confirm("Do you want to delete this post?") == true) {
                    var commentID = $(this).parent().attr("id");

                    if (commentID.length > 0) {
                        $('#' + commentID).remove().fadeOut();
                    } else {
                        alert("Can not find the ID of parent div.");
                    }
                }

            });
        }
    </script>--%>
    <form id="form1" runat="server">
    <div class="Comment-Insert-Container">
        <h3 >Tester Says:</h3>
        <textarea id="commentInput" rows="10" cols="1"></textarea>
        <div id="postBtn" class="Comment-Insert-btn">Post</div>
    </div>
    <div id="commentContainer" class="Comment-Container">

    </div>
    </form>

</body>
</html>
